window.onload = async function () {
  try {
    const res = await axios({
      url: '/dashboard',
      method: 'get',
      // 额外的设置请求头
      // 把登录之后的token 带到服务器
      // 接口/后端去校验 token是否正确
      // headers: {
      //   // msg这个值 只是用来的测试的 没有任何意义
      //   // msg: 'good good study day day up',
      //   // 缓存中获取 token
      //   Authorization: localStorage.getItem('token'),
      // },
    })
    // console.log('res:', res)
    const {
      data: { overview },
    } = res
    const {
      data: { year: data },
    } = res

    // console.log(overview);
    // document.querySelector('span[name=salary]').innerHTML = overview.salary
    // document.querySelector('span[name=student_count]').innerHTML=overview.student_count
    // document.querySelector('span[name=age]').innerHTML=overview.age
    // document.querySelector('span[name=group_count]').innerHTML = overview.group_count
    for (let k in overview) {
      document.querySelector(`span[name=${k}]`).innerHTML = overview[k]
    }

    // 粘贴
    const zhe = () => {
      //获取元素
      const yearmoney = document.querySelector('#line')
      // 初始化图标
      const money = echarts.init(yearmoney)
      let option
      option = {
        title: {
          text: '2022全学科薪资走势',
        },
        xAxis: {
          type: 'category',
          data: data.map((item) => item.month),
          axisLine: {
            lineStyle: {
              color: '#ccc',
              type: 'dashed',
            },
          },
          //坐标轴标签的颜色
          axisLabel: {
            color: '#999',
          },
        },
        yAxis: {
          type: 'value',
          //分隔线的样式
          splitLine: {
            lineStyle: {
              type: 'dashed',
            },
          },
        },
        tooltip: {
          trigger: 'axis',
        },
        //设置绘图网格
        grid: {
          //网格距离上方距离
          top: '20%',
        },
        series: [
          {
            data: data.map((item) => item.salary),
            type: 'line',
            smooth: true,
            lineStyle: {
              width: 6,
            },
            //标记的大小
            symbolSize: 10,
            //设置区域的渐变颜色
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#499FEE',
                },
                {
                  offset: 0.8,
                  color: 'rgba(255,255,255,0.2)',
                },
                {
                  offset: 1,
                  color: 'rgba(255,255,255,0)',
                },
              ]),
            },
          },
        ],
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: '#499FEE', // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#5D75F0', // 100% 处的颜色
              },
            ],
          },
        ],
      }

      option && money.setOption(option)
    }
    zhe()

    const {
      data: { salaryData: day },
    } = res
    // console.log(day)
    const yuan = () => {
      const classmoney = document.querySelector('#salary')
      const mone = echarts.init(classmoney)
      let option
      option = {
        title: {
          text: '班级薪资分布',
          top: 15,
          left: 10,
          textStyle: {
            fontSize: 16,
          },
        },
        tooltip: {
          trigger: 'item',
        },
        legend: {
          bottom: '6%',
          left: 'center',
        },
        color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
        series: [
          {
            name: '班级薪资分布',
            type: 'pie',
            //半径:radius
            radius: ['50%', '64%'],
            //中心点坐标
            center: ['50%', '45%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2,
            },
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                // show: true,
                fontSize: '40',
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: false,
            },
            // data: [
            //   { value: 1048, name: `${day[0].label}`},
            //   { value: 735, name: `${day[1].label}` },
            //   { value: 580, name: `${day[2].label}` },
            //   { value: 484, name: `${day[3].label}` },
            // ],
            data: day.map((item) => {
              return {
                value: item.g_count + item.b_count,
                name: item.label,
              }
            }),
          },
        ],
      }
      option && mone.setOption(option)
    }
    yuan()

    const {
      data: { groupData },
    } = res
    // console.log(groupData)
    const tem = () => {
      const chartDom = document.querySelector('#lines')
      const myChart = echarts.init(chartDom)
      let option

      option = {
        grid: {
          left: 70,
          top: 30,
          right: 30,
          bottom: 50,
        },
        xAxis: {
          type: 'category',
          data: groupData['1'].map((item) => item.name),
          axisLine: {
            lineStyle: {
              color: '#ccc',
              type: 'dashed',
            },
          },
          axisLabel: {
            color: '#999',
          },
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              type: 'dashed',
            },
          },
        },
        tooltip: {
          trigger: 'item',
        },
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#34D39A', // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(52,211,154,0.2)', // 100% 处的颜色
              },
            ],
          },
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#499FEE', // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(73,159,238,0.2)', // 100% 处的颜色
              },
            ],
          },
        ],
        series: [
          {
            data: groupData['1'].map((item) => item.hope_salary),
            type: 'bar',
            name: '期望薪资',
          },
          {
            data: groupData['1'].map((item) => item.salary),
            type: 'bar',
            name: '就业薪资',
          },
        ],
      }

      option && myChart.setOption(option)
      const btns = document.querySelector('#btns')
      // 添加事件委托
      btns.addEventListener('click', function (e) {
        if (e.target.tagName === 'BUTTON') {
          // console.log(e.target.innerHTML);
          const group = e.target.innerHTML
          //排他思想
          btns.querySelector('.btn-blue')?.classList.remove('btn-blue')
          e.target.classList.add('btn-blue')
          option.xAxis.data = groupData[group].map((item) => item.name)
          option.series[0].data = groupData[group].map(
            (item) => item.hope_salary
          )
          option.series[1].data = groupData[group].map((item) => item.salary)
        }
        option && myChart.setOption(option)
      })
    }
    tem()

    // 中国地图
    const {
      data: { provinceData },
    } = res
    // console.log(provinceData)

    const initMapChart = (ProvinceData) => {
      const myEchart = echarts.init(document.querySelector('#map'))
      ProvinceData.map((item) => {
        if (item.name === '西藏自治区') {
          item.name = '西藏'
        } else if (item.name === '内蒙古自治区') {
          item.name = '内蒙古'
        } else if (item.name === '新疆维吾尔自治区') {
          item.name = '新疆'
        } else if (item.name === '宁夏回族自治区') {
          item.name = '宁夏'
        } else if (item.name === '广西壮族自治区') {
          item.name = '广西'
        } else {
          item.name = item.name.replace(/省/, '')
        }
      })
      // const newData = ProvinceData.map(item => {
      //   return {
      //     name: item.name.replace(/省|自治区|维吾尔自治区|回族自治区|壮族自治区/g, ''),
      //   value:item.value}
      // })
      const dataList = [
        { name: '南海诸岛', value: 0 },
        { name: '北京', value: 0 },
        { name: '天津', value: 0 },
        { name: '上海', value: 0 },
        { name: '重庆', value: 0 },
        { name: '河北', value: 0 },
        { name: '河南', value: 0 },
        { name: '云南', value: 0 },
        { name: '辽宁', value: 0 },
        { name: '黑龙江', value: 0 },
        { name: '湖南', value: 0 },
        { name: '安徽', value: 0 },
        { name: '山东', value: 0 },
        { name: '新疆', value: 0 },
        { name: '江苏', value: 0 },
        { name: '浙江', value: 0 },
        { name: '江西', value: 0 },
        { name: '湖北', value: 0 },
        { name: '广西', value: 0 },
        { name: '甘肃', value: 0 },
        { name: '山西', value: 0 },
        { name: '内蒙古', value: 0 },
        { name: '陕西', value: 0 },
        { name: '吉林', value: 0 },
        { name: '福建', value: 0 },
        { name: '贵州', value: 0 },
        { name: '广东', value: 0 },
        { name: '青海', value: 0 },
        { name: '西藏', value: 0 },
        { name: '四川', value: 0 },
        { name: '宁夏', value: 0 },
        { name: '海南', value: 0 },
        { name: '台湾', value: 0 },
        { name: '香港', value: 0 },
        { name: '澳门', value: 0 },
      ]
       dataList.forEach(x => {
        ProvinceData.forEach(y => {
          x.name === y.name &&(x.value = y.value)
        })
       })
      // console.log(dataList);

      let option = {
        title: {
          text: '籍贯分布',
          top: 10,
          left: 10,
          textStyle: {
            fontSize: 16,
          },
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} 位学员',
          borderColor: 'transparent',
          backgroundColor: 'rgba(0,0,0,0.5)',
          textStyle: {
            color: '#fff',
          },
        },
        visualMap: {
          min: 0,
          max: 6,
          left: 'left',
          bottom: '20',
          text: ['6', '0'],
          inRange: {
            color: ['#ffffff', '#0075F0'],
          },
          show: true,
          left: 40,
        },
        geo: {
          map: 'china',
          roam: false,
          zoom: 1.0,
          label: {
            normal: {
              show: true,
              fontSize: '10',
              color: 'rgba(0,0,0,0.7)',
            },
          },
          itemStyle: {
            normal: {
              borderColor: 'rgba(0, 0, 0, 0.2)',
              color: '#e0ffff',
            },
            emphasis: {
              areaColor: '#34D39A',
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
        series: [
          {
            name: '籍贯分布',
            type: 'map',
            geoIndex: 0,
            data: dataList,
          },
        ],
      }
      myEchart.setOption(option)
    }
    initMapChart(provinceData)

    // 双圈

    const docuble = () => {
      const chartDom = document.querySelector('#gender')
      const myChart = echarts.init(chartDom)
      let option

      option = {
        tooltip: {
          trigger: 'item'
        },
        title:[{
          text:'男生',
          top:'42%',
          left:'45%',
        },
        {
          text:'女生',
          top:'85%',
          left:'45%',
        },
        {
          text:'男女薪资分布',
          top:10,
          left:5,
        }],
        series: [
          {
            name: '男生',
            type: 'pie',
            radius: ['25%', '40%'],
            center:['50%','25%'],
            avoidLabelOverlap: false,
            emphasis: {
              label: {
                show: true,
                fontSize: '15',
                fontWeight: 'bold'
              }
            },
            data: day.map((item) => {
              return {
                value: item.b_count,
                name: item.label,
              }
            }),
          },
          {
            name: '女生',
            type: 'pie',
            radius: ['25%', '40%'],
            center:['50%','65%'],
            avoidLabelOverlap: false,
            emphasis: {
              label: {
                show: true,
                fontSize: '15',
                fontWeight: 'bold'
              }
            },
            data: day.map((item) => {
              return {
                value: item.g_count ,
                name: item.label,
              }
            }),
          }
        ]
      }

      option && myChart.setOption(option)
    }
    docuble()
  } catch (error) {
    console.log(error)
  }
}
